<template>
    <div>
        <textarea v-model="val"  name="" id="" cols="30" rows="10"></textarea>
        <div>
            <JsonViewer :expand-depth="10" :copyable="true"  :value="result"></JsonViewer>
        </div>
    </div>
</template>

<script>
    import JsonViewer from "vue-json-viewer"
    export default {
        components:{
            JsonViewer
        },
        name: "Convert",
        watch:{
            val(nv){
                var item = (JSON).parse(nv);
                var arr = [];
                var walk = (item,arr) => {
                    for(var k in item){
                        var v = item[k];
                        var obj = {
                            en: k,
                            cn: "",
                            type: "",
                        };
                        if(typeof v == 'string'){
                            obj.type = "string";
                        } else if(v instanceof Array){
                            obj.children = [];
                            obj.type = 'object[]';
                            v.forEach(e => {
                                var a = [];
                                obj.children.push(a)
                                walk(e, a)
                            })
                        } else if(typeof v == 'object'){
                            obj.children = [];
                            obj.type = 'object';
                            walk(v, obj.children);
                        }
                        arr.push(obj);
                    }
                };
                walk(item,arr);
                this.result = arr;
            }
        },
        data(){
            return {
                result: null,
                val: ""
            }
        }
    }
</script>

<style scoped>

</style>